<!DOCTYPE html>
<#assign static=request.getContextPath()+"/static" />
<#assign base=request.getContextPath() />
<html>
  <head>
    <meta charset="UTF-8">
    <title>登陆shiroDemo</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <link href="${static}/plugins/buttons/css/buttons.css" rel="stylesheet" />
    <link href="${static}/css/login.css" rel="stylesheet" />
    <link href="${static}/css/patternLock.css" rel="stylesheet" />
    <style>
      .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica,serif;
        color:#fff;
        background:rgba(0,0,0,0.13);
        top:10%;
      }
      .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
      }
      .box h2{
          text-align:center;
          margin:10px 0;
          font-size:20px;
      }
      .box input{
        display:block;
        width:300px;
        margin:20px auto;
        padding:15px;
        background:rgba(0,0,0,0.2)!important;
        color:#fff;
        border:0;
      }
      .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
      }
      .box button{
        background:#742ECC;
        border:0;
        color:#fff;
        padding:10px;
        font-size:20px;
        width:330px;
        margin:20px auto;
        display:block;
        cursor:pointer;
      }
      .box button:active{
        background:#27ae60;
      }
      .box p{
        font-size:14px;
        text-align:center;
      }
      .box img{
          margin:auto;
          position: absolute;
          top: 0; left: 0; bottom: 0; right: 0;
          padding: 15px;

      }
      .box p span{
        cursor:pointer;
        color:#666;
      }
      #page-preloader {
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 9999;
          background: url(${static}/images/loading_2.gif) center no-repeat #fff;
      }
    </style>
  </head>
  <body>

  <div id="page-preloader"></div>

  <div class="container demo-2"  id="pageContainer">
    <div class="content">
      <div id="large-header" class="large-header">
        <canvas id="demo-canvas"></canvas>
          <div class="box" >
                  <h1 id="logoText">登录shiroDemo</h1>

                      <input type="text"  id="userid" name="userid" placeholder="用户名" />
                      <input type="password"  id="password" name="password" placeholder="密码"/>
                      <div id="captchaDiv" style="display: none">
                          <input type="text"  id="captcha" name="captcha" maxlength="8"  placeholder="请输入验证码" />
                          <div style="position: relative;padding: 30px;margin:auto;bottom:10px;" >
                              <img src="" id="kaptchaImage" />
                          </div>
                      </div>

                      <a style="width: 300px;display: block;margin: 20px auto;font-weight: bolder;"
                         class="button button-jumbo glow button-action button-pill" id="logon">登录</a>
                      <h2 id="tips"></h2>


           </div>
      </div>
    </div>

  </div><!-- /container -->


  <input type="hidden" id="uuid" value="" />

  <!-- jQuery 2.1.4 -->

  <script src="${static}/js/jquery.min.js"></script>

  <!-- iCheck -->
    <script src="//cdn.bootcss.com/iCheck/1.0.2/icheck.min.js" type="text/javascript"></script>
    <script src="${static}/js/patternLock.js" type="text/javascript"></script>

        <script>

        $(function () {

        var lastTime = 0;
        var vendors = ['ms', 'moz', 'webkit', 'o'];
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
                    || window[vendors[x] + 'CancelRequestAnimationFrame'];
        }

        if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function (callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(function () {
                            callback(currTime + timeToCall);
                        },
                        timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };

        if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function (id) {
                clearTimeout(id);
            };


        $("#logon").click(function () {

            var userId = $("#userid").val();
            var password = $("#password").val();
            var uuid = $("#uuid").val();
            var captcha = $("#captcha").val();
            var tips = $("#tips");


            if ($.trim(uuid) != "" && $.trim(captcha) == "") {
                tips.html("请输入验证码!");
                return false;
            }
            if ($.trim(userId) == "") {
                tips.html("请输入用户名!");
                return false;
            }
            if ($.trim(password) == "") {
                tips.html("请输入密码!");
                return false;
            }

            tips.empty();

            $.ajax({
                type: 'post',
                url: '${base}/logon',
                data: {userId: userId, password: password, uuid: uuid, captcha: captcha},
                success: function (data) {

                    if (data == "1") {
                        tips.hide();
                        window.location.href = "${base}/user/index";
                    } else if (data == "3") {
                        tips.html("用户名已锁定,请等待30分钟后再试!");
                        $("#captchaDiv").show();
                        refreshCaptcha();
                    } else {
                        tips.html("用户名或密码错误!");
                        $("#captchaDiv").show();
                        refreshCaptcha();
                    }
                }

            });


        });


        document.querySelector('body').addEventListener('keydown', function (e) {
            if (e.which == 13) {
                $("#logon").trigger("click");
            }
        }, false);


        var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;

        // Main
        initHeader();
        addListeners();

        function initHeader() {
            width = window.innerWidth;
            height = window.innerHeight;
            target = {x: 0, y: height};

            largeHeader = document.getElementById('large-header');
            largeHeader.style.height = height + 'px';

            canvas = document.getElementById('demo-canvas');
            canvas.width = width;
            canvas.height = height;
            ctx = canvas.getContext('2d');

            // create particles
            circles = [];
            for (var x = 0; x < width * 0.5; x++) {
                var c = new Circle();
                circles.push(c);
            }
            animate();
        }

        // Event handling
        function addListeners() {
            window.addEventListener('scroll', scrollCheck);
            window.addEventListener('resize', resize);
        }

        function scrollCheck() {
            animateHeader = document.body.scrollTop <= height;
        }

        function resize() {
            width = window.innerWidth;
            height = window.innerHeight;
            largeHeader.style.height = height + 'px';
            canvas.width = width;
            canvas.height = height;
        }

        function animate() {
            if (animateHeader) {
                ctx.clearRect(0, 0, width, height);
                for (var i in circles) {
                    circles[i].draw();
                }
            }
            requestAnimationFrame(animate);
        }

        // Canvas manipulation
        function Circle() {
            var _this = this;

            // constructor
            (function () {
                _this.pos = {};
                init();
            })();

            function init() {
                _this.pos.x = Math.random() * width;
                _this.pos.y = height + Math.random() * 100;
                _this.alpha = 0.1 + Math.random() * 0.3;
                _this.scale = 0.3 + Math.random() * 0.3;
                _this.velocity = Math.random() + 0.3;
            }

            this.draw = function () {
                if (_this.alpha <= 0) {
                    init();
                }
                _this.pos.y -= _this.velocity;
                _this.alpha -= 0.0005;
                ctx.beginPath();
                ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
                ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')';
                ctx.fill();
            };
        }

        function refreshCaptcha() {
            var uuid = generateUUID();
            $("#uuid").val(uuid);
            $("#kaptchaImage").hide().attr("src", "${base}/captcha?uuid=" + uuid).fadeIn(10);
        }

        function generateUUID() {
            var d = new Date().getTime();
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
            });
            return uuid;
        }

        $(window).load(function () {

            $('#page-preloader').fadeOut(3000);
            $("#menuBtn").trigger("click");
        });
    });


        </script>

  </body>
</html>